<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_全屏遮罩</title>
    <style>
        .mask{
            position: fixed;
            /*width: 200px;*/
            /*height:300px;*/
            top:0;
            left:0;
            bottom: 0;
            right:0;
            background-color: rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut delectus deleniti, deserunt facilis hic inventore
        libero obcaecati omnis provident qui! Architecto aut commodi impedit itaque, mollitia officiis perferendis rerum
        voluptates?
    </div>
    <div>Accusamus aperiam autem cupiditate debitis doloribus, eos iste laudantium magnam nisi non perspiciatis placeat
        quas quidem ratione reiciendis rem repellendus similique sunt suscipit tenetur ullam vitae voluptate voluptates!
        Eligendi, perferendis?
    </div>
    <div>Consequuntur eligendi esse est id laborum magnam minus nesciunt nisi nulla quas, qui recusandae reprehenderit
        saepe! Architecto aspernatur debitis enim expedita inventore ipsum, neque nostrum pariatur quo ullam ut veniam?
    </div>
    <div>Ad eveniet laboriosam laborum nisi nostrum obcaecati provident velit! Ad assumenda corporis culpa delectus
        dignissimos eaque eligendi fuga illo inventore nemo nihil, nisi odit officiis quasi rerum sapiente, tempore vel?
    </div>
    <div>Accusantium hic in libero maxime officia tempore tenetur, vitae! Asperiores beatae culpa cupiditate deserunt,
        eius facere in laboriosam neque nisi non nulla officia quia repellendus, suscipit voluptas. Mollitia odio,
        voluptate?
    </div>
    <div>Autem explicabo fuga laboriosam molestias nobis, nostrum quas rem sequi. Animi cumque earum eius facere fuga
        nesciunt, nobis! Aliquam dolores enim ex itaque iure modi mollitia veniam vitae voluptate voluptatibus?
    </div>
    <div>Ab ad, amet dolorum eligendi et incidunt magnam minima minus mollitia nisi odit officiis omnis recusandae sunt
        veniam. Animi blanditiis delectus ex nulla placeat quae sapiente soluta ut voluptate voluptatum?
    </div>
    <div>Illum minus quaerat rerum tempora voluptatem! Accusantium ad aliquam beatae dolor exercitationem in ipsum
        itaque, nihil officia optio, quasi quo quod quos recusandae reiciendis sapiente soluta? Architecto nam velit
        vero!
    </div>
    <div>Accusamus, accusantium consequatur deleniti et eum fuga itaque libero molestiae natus, optio qui quod
        reprehenderit. A aliquam earum, eius error harum in iure labore nisi placeat repellendus sit sunt ullam.
    </div>
    <div>Ab animi architecto blanditiis debitis dignissimos dolores doloribus ducimus eaque eligendi error incidunt
        inventore ipsam nemo nobis odit optio perferendis, praesentium quam, qui quia quidem quisquam repellendus rerum
        velit voluptatem?
    </div>
    <div>Amet, cum et! Ad animi aut, dignissimos dolore eius eum facere harum id ipsa molestiae necessitatibus nulla
        numquam odio quae quam, quas quo voluptas voluptatum. Culpa deleniti incidunt laborum officia!
    </div>
    <div>Ad, aut dolorum ducimus eligendi eos fuga illo impedit ipsum maiores modi, nemo nihil nobis nulla odio odit
        optio quaerat quia quod ratione repudiandae similique suscipit ullam unde voluptas voluptates?
    </div>
    <div>Expedita laboriosam mollitia non perspiciatis quos vero. Ad, earum esse exercitationem quibusdam quod
        repudiandae saepe sunt ut? Consectetur distinctio ea ipsam magnam odio quod recusandae, sequi velit voluptates?
        Aliquam, aperiam!
    </div>
    <div>Aliquid beatae molestias tempora vero. Ab accusantium adipisci aliquid atque commodi, deleniti deserunt dicta
        et, ex fuga illo ipsum maiores minima optio quas quod, voluptatibus. Aperiam consequatur magnam non porro.
    </div>
    <div>Accusamus alias, aspernatur corporis, deserunt, dignissimos doloremque eum fugit laudantium nisi obcaecati
        quisquam sint unde veniam voluptatibus voluptatum. Assumenda deserunt neque officiis ut voluptas! Aperiam
        delectus enim saepe vel voluptatem.
    </div>
    <div>Aliquam consectetur eveniet minima qui reiciendis. Architecto asperiores aut commodi consequatur consequuntur
        culpa cumque debitis dicta dignissimos facere id, ipsum libero necessitatibus neque nostrum officia officiis
        quaerat sed totam ut.
    </div>
    <div>Accusantium, ad, alias architecto aspernatur atque blanditiis consequatur ea eum incidunt laboriosam libero
        maiores, maxime nisi possimus quis rem similique tempore ullam vel voluptas. A corporis eum laborum quae unde?
    </div>
    <div>A alias animi at aut autem deleniti eligendi enim excepturi explicabo, fugiat fugit in iure laboriosam, modi
        nihil numquam perferendis placeat quas quasi quia repellendus sunt tempore vitae voluptas voluptate.
    </div>
    <div>Adipisci alias commodi consequatur delectus deleniti eaque inventore ipsa iure magnam, nemo neque nobis
        obcaecati officiis omnis perferendis porro possimus, quaerat quam quia ratione similique suscipit totam ullam ut
        voluptates!
    </div>
    <div>Aspernatur at commodi delectus hic molestiae provident! Accusantium aliquam aliquid, aut autem expedita harum
        ipsa libero maiores modi, mollitia nihil officia officiis possimus, quis ratione sequi sunt tempora temporibus
        totam.
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam aut autem beatae dolor doloribus ex
        incidunt laudantium maiores modi molestiae nisi nulla odio, quibusdam quos ratione rem tenetur. Doloremque.
    </div>
    <div>Laboriosam, neque quos. A accusamus adipisci aperiam assumenda culpa dignissimos ducimus ipsum libero maxime
        minus provident quam quas quasi quidem repellat rerum, sapiente, similique velit veritatis vitae voluptas
        voluptates, voluptatibus?
    </div>
    <div>Aperiam at corporis cumque dicta esse ex, explicabo fugiat in ipsa magni perspiciatis porro quaerat quo
        recusandae vero voluptas voluptatibus! Autem facere fugiat ipsum pariatur quidem reprehenderit rerum tempora
        vitae.
    </div>
    <div>Ab cumque doloremque ex explicabo incidunt libero maiores minus, quas quisquam saepe! Aperiam, consequuntur cum
        cumque doloribus enim excepturi harum, id itaque magnam non nulla officia rem sint, sit soluta.
    </div>
    <div>Ad dolor ipsa maiores nemo nesciunt perferendis quam ratione repellendus similique temporibus. Amet animi atque
        consequuntur cupiditate, delectus dolor dolores enim eum facere fugiat necessitatibus nesciunt numquam
        quibusdam, sunt suscipit?
    </div>
    <div>Ad amet, aspernatur consequuntur culpa cumque deleniti, error et exercitationem iste, laboriosam magni minima
        mollitia natus non nostrum nulla perferendis perspiciatis quaerat suscipit unde vel vero voluptate! Ipsum,
        praesentium, quas!
    </div>
    <div>Aliquid architecto blanditiis commodi dolor dolorem ducimus earum enim exercitationem explicabo fuga id iusto,
        maxime nemo nostrum numquam optio quae quisquam reiciendis reprehenderit sit, sunt totam veritatis voluptatem.
        Eaque, eius?
    </div>
    <div>Debitis esse expedita illum iusto laboriosam laborum libero, nihil nostrum quas vitae. Debitis delectus
        deserunt distinctio, enim ex facilis molestiae non odit pariatur perspiciatis quidem recusandae reiciendis saepe
        sapiente suscipit.
    </div>
    <div>Ab ad adipisci aliquam architecto aspernatur consequatur cum eaque eos fugit illo labore, libero, nihil
        quibusdam reiciendis rem. At cumque, deserunt dignissimos eaque nemo neque perspiciatis quo rem rerum veritatis?
    </div>
    <div>Asperiores aut corporis dolores error ex expedita explicabo hic modi nisi optio! Aliquid animi consequuntur
        dignissimos eos, error eum eveniet id neque nostrum quos reprehenderit tempora temporibus velit vero vitae!
    </div>
    <div>Eveniet fugit impedit, inventore laudantium magnam necessitatibus obcaecati porro reiciendis. Debitis dicta,
        dolore eius iste mollitia nesciunt possimus quam quisquam quos voluptatibus. Ad illo impedit incidunt minus
        necessitatibus quae sed!
    </div>
    <div>Accusamus aliquam consectetur cum dolores eius est ex harum hic iure laboriosam laudantium magnam, non, nulla
        numquam omnis porro, quae quaerat quo rerum suscipit temporibus totam ut? Autem eveniet, illo!
    </div>
    <div>A adipisci alias cupiditate enim, iste, magnam minus molestiae molestias nulla quibusdam repudiandae rerum
        sapiente ut? Accusamus aspernatur, beatae deserunt doloribus maxime obcaecati optio perferendis reiciendis, sit
        temporibus ullam voluptas?
    </div>
    <div>Assumenda deleniti dolores fugiat, iste nemo neque pariatur quis? Animi aspernatur commodi dolorum magnam
        magni, omnis perspiciatis quis repellendus saepe similique tempora unde ut! Alias atque eveniet necessitatibus
        optio unde!
    </div>
    <div>A accusamus aperiam aut delectus deserunt, facere ipsam necessitatibus. At cumque cupiditate eaque eligendi,
        itaque libero pariatur ratione recusandae? Aperiam, dolor dolore doloribus explicabo facere magni minus non ut
        voluptatibus.
    </div>
    <div>Adipisci cumque eligendi eos exercitationem facilis iusto laboriosam laborum libero maxime natus neque nesciunt
        quam reiciendis, repudiandae sapiente sint sit tenetur, ullam. Accusamus debitis deserunt eveniet mollitia
        numquam quisquam sit?
    </div>
    <div>Architecto error expedita quis recusandae repudiandae. Ad assumenda cum error eum obcaecati odio quod? Minus
        molestias praesentium quas quod voluptatem voluptatibus. Architecto aut corporis deserunt dicta eaque et, eum
        libero.
    </div>
    <div>Adipisci asperiores aspernatur facilis impedit nemo repellendus, veniam! Asperiores aut blanditiis error harum
        voluptatum! Accusantium debitis ducimus pariatur possimus quas, sed tempora. Eum facilis fuga iste modi natus
        nisi quasi.
    </div>
    <div>Ab accusamus at culpa delectus dicta error minima possimus quasi repudiandae rerum? Autem dolores, eius
        explicabo maxime odit sequi sit tenetur ullam. Architecto magni maxime placeat sed temporibus unde veniam.
    </div>
    <div>Asperiores aspernatur aut beatae, consequatur deleniti dicta dolor est facere fuga illum in, neque odio porro
        possimus quisquam quod ut voluptatum! Aliquam animi consequuntur ducimus, magni nobis nulla sequi sint.
    </div>
    <div>Ab consectetur deleniti ducimus esse, fugiat magnam reiciendis repellendus. Accusamus alias amet consectetur ex
        ipsam nemo, vero. A commodi error magni modi placeat praesentium repellendus tempore! Illo iure tempore vel.
    </div>
    <div>Cumque delectus dolorem eos excepturi rem. Amet, asperiores dolores eius ex explicabo fuga inventore maxime
        quaerat quidem. Aliquid deserunt dolorem, ipsam maxime nam perferendis quisquam rerum. Beatae laborum natus sed.
    </div>
    <div>A dicta doloremque eveniet explicabo, fugiat veritatis voluptatem. Accusamus animi cum, dolorum earum eligendi
        eos, est, expedita fugit illo impedit libero minima officia pariatur provident quas quisquam repellendus
        sapiente vel.
    </div>
    <div>Amet culpa hic necessitatibus odit quaerat tempora! Accusantium adipisci commodi culpa et ex impedit laudantium
        nostrum placeat quam repellat. Architecto autem culpa cupiditate eum illo laudantium repellendus unde vero
        voluptas.
    </div>
    <div>A architecto aspernatur blanditiis deleniti dolorem facere, inventore ipsa labore, maxime natus pariatur
        perspiciatis quia quis ratione suscipit temporibus totam. Esse fugit ipsa perferendis quia reiciendis rerum
        saepe! Accusantium, illum?
    </div>
    <div>Aspernatur doloremque dolorum, eaque facere, fugiat id laudantium magni, mollitia nulla numquam officiis optio
        perspiciatis quasi quo ullam veniam voluptatibus! Atque cum dolor dolore explicabo harum illum quidem ullam
        voluptatibus.
    </div>
    <div>Aut cum eos natus quis repellendus. A dolorem esse eum quisquam sunt. Ab ad deleniti doloremque dolorum ea in
        magni odio, perferendis perspiciatis quibusdam quisquam suscipit ullam vel voluptate voluptatibus!
    </div>
    <div>Accusamus aperiam dicta eum excepturi fugiat hic impedit, necessitatibus, nesciunt numquam provident quibusdam
        quisquam quod saepe suscipit ullam voluptas voluptatum? Asperiores aspernatur cumque deleniti earum illo officia
        sed temporibus? Hic!
    </div>
    <div>Aliquam atque eveniet incidunt ipsa modi non quas recusandae sequi velit. Ad asperiores aspernatur, ducimus
        eius ipsa iure maxime quas sit? Autem consequuntur et fuga, neque quasi tempore ut voluptate.
    </div>
    <div>Accusamus aut, blanditiis dolor doloremque, et eum natus nihil omnis, porro provident quasi reprehenderit sint
        soluta tempora voluptates! Ab alias blanditiis consequatur cumque delectus earum excepturi expedita provident
        saepe sequi.
    </div>
</div>
</body>
</html>